<template>
	<div class="display">
		<ArticleCard
			v-for="article in displayArticles"
			:img="article.img"
			:title="article.title"
			:date="article.CreationDate"
			:like="article.likeCount"
			:comments="article.commentsCount"
			:classify="article.type"
			:tags="article.Tags"
			:content="article.content[0]"
			:author="article.Author"
			:author_id="article.AuthorID"
			:article_id="article.id"
		/>
	</div>
</template>

<script setup>
import ArticleCard from './ArticleCard.vue';

defineProps({
	displayArticles: {
		type: Array,
		default: []
	}
})

// const displayArticles = ref([{
// 	img: '', 				// 图片
// 	title: '',			// 标题
// 	date: '',				// 时间
// 	like: 0,				// 点赞
// 	comments: 0,		// 评论数
// 	classify: '',		// 分类
// 	tag: '',				// tag []
// 	name: '',				// 作者
// 	content: '',		// 内容 第一句话
// 	id: '',					// 作者id
// 	article: ''			// 文章id
// }])
</script>

<style scoped>
.display {
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;/* 垂直居中 */
}
</style>